import React from 'react';


import classnames from 'classnames';
import {Tooltip} from 'antd';
//component
import ReIcon from '../ReIcon';
import ReAvatar from '../ReAvatar';

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        src: React.PropTypes.string,
        title: React.PropTypes.string,
        onSrcClick: React.PropTypes.func,
        onTitleClick: React.PropTypes.func,
        onAvatarClick: React.PropTypes.func,
    };

    static defaultProps = {
        src: '/assets/images/components/widgets/ReCard/images/label.png',
        onTitleClick: () => {
        },
        onSrcClick: () => {
        },
        onAvatarClick: () => {

        }
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            src: props.src,
            title: props.title,
            recordId: 0,
        };
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            src: nextProps.src,
            title: nextProps.title,
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {
        let {title, src, data, avatarSrc,custom} = this.props;
        // console.log('props', this.props);
        const classNames = classnames({
            'orin-w-card-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div className={classNames}>
                <div className="card-wrap">
                    <div className="card-cover" onClick={(e) => this.props.onSrcClick && this.props.onSrcClick(e)}>
                        <img src={src}/>
                        <div className="mask"/>
                    </div>
                    <div className="card-text-container">
                        <div className="title"
                             onClick={(e) => this.props.onTitleClick && this.props.onTitleClick(e)}>{title}</div>
                        <div className="avatar"
                             onClick={(e) => this.props.onAvatarClick && this.props.onAvatarClick(e)}>
                            <ReAvatar className="user-avatar" src={avatarSrc} size={50}/>
                            <span className="name">{data.userName}</span>
                        </div>
                        <div className="item-info">
                            {/*<div className="view-num-wrapper">*/}
                                {/*/!* <Tooltip placement="bottom" title="浏览"> *!/*/}
                                {/*<span className="view-icon">*/}
                                        {/*<ReIcon className="icon" icon="yiweitubiaodaheji-4"/>*/}
                                    {/*</span>*/}
                                {/*/!* </Tooltip> *!/*/}
                                {/*<span className="view-num-number number">*/}
                                    {/*{this.regularNumber(data.viewNumber) || 0}*/}
                                {/*</span>*/}
                            {/*</div>*/}
                            <div className="left">
                                <div className="give-like-wrapper">
                                    <span className="give-like-btn">
                                        <ReIcon className="icon"
                                                icon="yiweitubiaodaheji-4"/>
                                    </span>
                                    <span className="give-like-number number">
                                    {this.regularNumber(data.viewNumber) || 0}
                                </span>
                                </div>
                                <div className="give-like-wrapper">
                                    <Tooltip placement="bottom"
                                             title={data.giveLikeType ? $$.LN.CANCEL_AGREE : $$.LN.AGREE}>
                                    <span className="give-like-btn"
                                          onClick={(e) => this.giveLike(e, data.id)}>
                                        {/*<ReIcon className="icon"*/}
                                                {/*icon={data.giveLikeType ? 'yiweitubiaodaheji--copy1' : 'yiweitubiaodaheji--copy1'}/>*/}
                                        <i className={data.giveLikeType ? 'iconfont red-color icon-like' : 'iconfont icon-like'}/>
                                    </span>
                                    </Tooltip>
                                    <span className="give-like-number number">
                                    {this.regularNumber(data.giveLike) || 0}
                                </span>
                                </div>
                            </div>
                            {
                                custom === 1 &&
                                <div className="tag">
                                    多展厅
                                </div>
                            }
                            {/*<div className="give-like-wrapper">*/}
                                {/*<Tooltip placement="bottom"*/}
                                         {/*title={data.collectionType ? $$.LN.CANCEL_COLLECT : $$.LN.COLLECT}>*/}
                                    {/*<span className={data.collectionType ? 'give-like-btn collect' : 'give-like-btn'}*/}
                                          {/*onClick={(e) => this.collect(e, data.id)}>*/}
                                        {/*<ReIcon className="icon"*/}
                                                {/*icon={data.collectionType ? 'yiweitubiaodaheji-3' : 'yiweitubiaodaheji-3'}/>*/}
                                    {/*</span>*/}
                                {/*</Tooltip>*/}
                                {/*<span className="give-like-number number">*/}
                                {/*{this.regularNumber(data.collectionNumber) || 0}*/}
                                {/*</span>*/}
                            {/*</div>*/}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    giveLike(e, id) {
        this.props.giveLikeClick(e);
        this.setState({
            recordId: id
        });
    }

    collect(e, id) {
        this.props.collectClick(e);
        this.setState({
            recordId: id
        });
    }

    regularNumber(num) {
        if (num >= 10000) {
            return `${Math.round((num / 10000) * 100) / 100}万`
        } else {
            return num;
        }
    }
}
